<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" charset="utf-8" src="../../static/announcements/ueditor/1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../static/announcements/ueditor/1.4.3/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="../../static/announcements/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../static/public_file/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../../static/personal_center/font_2369197_oqktwkt71s/iconfont.css" media="screen">
    <script type="text/javascript" src="../../static/public_file/js/ModalBox.js"></script>
    <style>
        body, html {
            padding: 0px;
            margin: 0px;
            width: 100%;
            height: 100%;
        }
        .add_class{
            background: #1E90FF;
        }
        .add_background {
            background: #A9A9A9;
        }

        table {
            table-layout: fixed;
        }
        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        .li-class {
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
        }
        #Table td{
            text-align: center;
            border-bottom: #F2F2F2 solid 1px;
            /*overflow:hidden;*/
            /*white-space:nowrap;*/
            /*text-overflow:ellipsis;*/
            -o-text-overflow:ellipsis;
        }
        #Table1 td{
            text-align: center;
            border-bottom: #F2F2F2 solid 1px;
            /*overflow:hidden;*/
            /*white-space:nowrap;*/
            /*text-overflow:ellipsis;*/
            -o-text-overflow:ellipsis;
        }
        #Table2 td{
            text-align: center;
            border-bottom: #F2F2F2 solid 1px;
            /*overflow:hidden;*/
            /*white-space:nowrap;*/
            /*text-overflow:ellipsis;*/
            -o-text-overflow:ellipsis;
        }
        #Table3 td{
            text-align: center;
            border-bottom: #F2F2F2 solid 1px;
            /*overflow:hidden;*/
            /*white-space:nowrap;*/
            /*text-overflow:ellipsis;*/
            -o-text-overflow:ellipsis;
        }
        #t_table4 td{
            color: #0b0b0b;
            cursor: pointer;
            border-bottom: #F2F2F2 solid 1px;
            /*overflow:hidden;*/
            /*white-space:nowrap;*/
            /*text-overflow:ellipsis;*/
            -o-text-overflow:ellipsis;
        }
        #Table tr:hover{
            background: #D8D8D8;
            color: white;
        }
        #Table1 tr:hover{
            background: #D8D8D8;
            color: white;
        }
        #Table2 tr:hover{
            background: #D8D8D8;
            color: white;
        }
        #Table3 tr:hover{
            background: #D8D8D8;
            color: white;
        }
        #t_table4 tr:hover{
            background: #D8D8D8;
            color: white;
        }
        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        .search {
            width: 300px;
            display: flex;
            float: right;
            margin: 10px 0;
            margin-right: 1%;
            /*border: 1px solid red;*/
        }

        .search input {
            vertical-align: middle;
            float: left;
        / / 左浮动 flex: 4;
            height: 30px;
            width: 230px;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;
        / / 盒子模型，怪异IE盒子模型，width = content + border * 2 + padding * 2 padding-left: 10 px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }

        .search button {
            float: right;
            flex: 1;
            height: 30px;
            width: 70px;
            line-height: 30px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        }

        .search button i {
            font-style: normal;
        }

        .search button:hover {
            font-size: 16px;
        }

        .shadow_tab{
            box-shadow: #01AAED 0 0 10px;
        }
        .shadow_tab_1{
            width: 20%;height: 80px;border: #cfcfcf solid 1px;margin-right: 1%;display: inline-block;vertical-align: top;cursor: pointer;margin-left: 1%;margin-top: 10px;
        }
        .a_tag_cla{
            /*超出隐藏*/
            overflow: hidden;
            /*禁止换行*/
            white-space: nowrap;
            /*超出用省略号代替*/
            text-overflow: ellipsis;
        }
        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(36, 36, 36, 0.5);
            display: none;
            z-index: 10000;
        }
        #addForm1 {
            width: 800px;
            height: 620px;
            background: #F5F5F5;
            position: absolute;
            border: #dfdfdf solid 1px;
            margin: auto;
            border-radius: 3px;
            top: 50%;
            left: 50%;
            /* 实现鼠标拖拽使用css3效果 */
            transform: translate(-50%, -50%);
            z-index: 10100;
            font-size: 0;
        }
        #title {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            height: 50px;
            color: #0b0b0b;
            cursor: move;
            /*border: #dfdfdf solid 1px;*/
            width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
        #loading { background: #fff url(../../static/public_file/images/jiazai.gif) no-repeat scroll center center; height: 100%; width: 100%; background-size: 10%; position: fixed; margin-top: 0px; top: 0px; left: 0px; bottom: 0px; overflow: hidden !important; right: 0px; z-index: 999999;background-color: rgba(255, 255, 255, 0.08);}

    </style>
</head>
<body>
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>

    <div style="width: 100%;height: 40px;background: white;border-bottom: #A9A9A9 solid 0.5px;">
        <div id="notice_detail" onclick="change_mind('notice_detail')" class="tab_top top_tag">
            公告详情
        </div>
        <div id="reception_detail" onclick="change_mind('reception_detail')" class="tab_top">
            接收详情
        </div>

        <button style="float: right;width: 100px;height: 30px;line-height: 30px;margin-top: 5px;border-radius: 3px;border: #1E90FF solid 0.5px;background-color: #1E90FF;color: white;cursor: pointer;margin-right: 15px;" onclick="fill_val(ele_id='', func='', travel='', recipient='true')" >添加收阅人</button>
    </div>

    <div id="notice_detail_tab" style="width: 100%;height: 93%;">
        <div style="width: 100%;height: 100%;background-color: white;">
            <div style="width: 100%;height: 40px;line-height: 40px;text-align: center;"><h3 id="notice_title"></h3></div>
            <div style="width: 100%;height: 40px;line-height: 40px;text-align: center;"><span id="company"></span> <span style="margin-left: 2%;" id="create_people"></span></div>
            <div style="width: 100%;height: 40px;line-height: 40px;text-align: center;" id="creat_time"></div>
            <hr>
            <div style="width: 100%;height: 75%;">
                <div style="width: 90%;height: 80%;overflow: auto;padding-left: 10%;" id="content">
                </div>
                <hr>
                <div id="accessory" style="padding-left: 3%;font-size: 16px;height: 17%;overflow: auto;"></div>
            </div>

        </div>
    </div>

    <div id="reception_tab" style="width: 100%;height: 95%;display: none;background-color: white;">
        <div style="width: 100%;height: 100px;border-bottom: #cfcfcf solid 1px;">
            <div id="tab_1" class="shadow_tab_1 shadow_tab" onclick="Change_tab(1)">
                <div style="width: 80px;padding-left: 10%;display: inline-block;vertical-align: top;margin-top: 15px;">
                    <img src="../../static/administrative/img/1人员管理.png" alt="" style="width: 50px;height: 50px;">
                </div>
                <div style="display: inline-block;vertical-align: top;">
                    <div style="height: 25px;">
                        <h5 style="color: #01AAED;" id="auto_num"></h5>
                    </div>
                    <div style="height: 25px;">收阅人次</div>
                </div>
            </div>

            <div id="tab_2" class="shadow_tab_1" onclick="Change_tab(2)">
                <div style="width: 80px;padding-left: 10%;display: inline-block;vertical-align: top;margin-top: 15px;">
                    <img src="../../static/administrative/img/查看.png" alt="" style="width: 50px;height: 50px;">
                </div>
                <div style="display: inline-block;vertical-align: top;">
                    <div style="height: 25px;">
                        <h5 style="color: #00b7ee;" id="have_see"></h5>
                    </div>
                    <div style="height: 25px;">已查看</div>
                </div>
            </div>

            <div id="tab_3" class="shadow_tab_1" onclick="Change_tab(3)">
                <div style="width: 80px;padding-left: 10%;display: inline-block;vertical-align: top;margin-top: 15px;">
                    <img src="../../static/administrative/img/未查看.png" alt="" style="width: 50px;height: 50px;">
                </div>
                <div style="display: inline-block;vertical-align: top;">
                    <div style="height: 25px;">
                        <h5 style="color: #e02107;" id="unread_see"></h5>
                    </div>
                    <div style="height: 25px;">未查看</div>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 85%;">
            <div id="tab_one" style="width: 100%;height: 100%;overflow: auto;">
                <table style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                    <thead>
                        <tr style="background-color: #F5F5F5;">
                            <th style="width: 10%;border: #cccccc solid 1px;border-top: none;">接收人</th>
                            <th style="width: 10%;border: #cccccc solid 1px;border-left: none;border-top: none;">状态</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;border-top: none;">查看时间</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;border-top: none;">签名</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="Table">

                    </tbody>
                </table>
            </div>
            <div id="tab_two" style="width: 100%;height: 100%;display: none;overflow: auto;">
                <table style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                    <thead>
                        <tr style="background-color: #F5F5F5;">
                            <th style="width: 10%;border: #cccccc solid 1px;">接收人</th>
                            <th style="width: 10%;border: #cccccc solid 1px;border-left: none;">状态</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">查看时间</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">签名</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="Table2">
                    </tbody>
                </table>
            </div>
            <div id="tab_three" style="width: 100%;height: 100%;display: none;overflow: auto;">
                <table style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                    <thead>
                        <tr style="background-color: #F5F5F5;">
                            <th style="width: 10%;border: #cccccc solid 1px;">接收人</th>
                            <th style="width: 10%;border: #cccccc solid 1px;border-left: none;">状态</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">查看时间</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">签名</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="Table3">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="addForm" class="shade">
        <div id="addForm1">
            <div id="title">
                <div style="width: 20%;margin-left: 1%;display: inline-block;font-size: 20px;">
                    <p style="margin-left: 1%;display: inline-block;font-size: 18px;">选择接收人员</p>
                </div>

                <div class="search" style="vertical-align: center;display: inline-block;text-align: right;margin-left: 35%;font-size: 14px;">
                    <input type="text" placeholder="请输入..." name="" id="search_data" value="">
                    <button id="search_button">搜索</button>
                </div>
                <span onclick="close_models1()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
            </div>
            <hr>
            <div style="display: inline-block;width: 30%;height: 350px;border-right: #E8E8E8 solid 1px;">
                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;color: #0b0b0b;border-bottom: #cfcfcf solid 1px;font-size: 14px;">
                    <div id="an_branch"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;color: #01aaed;">
                        按部门
                    </div>
                    <div id="an_rank"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按权限
                    </div>
                    <div id="an_func"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按职能
                    </div>
                </div>
                <div id="department_list" style="width: 100%;height: 315px;overflow: auto;">
                    <div style="width: 100%;height: 100%;text-align: center;">
                        <img style="width: 30%;height: 30%;margin-top: 35%;"
                             src="../../static/public_file/images/jiazai.gif" alt="">
                    </div>
                </div>
            </div>

            <div style="display: inline-block;width: 69.5%;height: 350px;overflow: auto;vertical-align: top;left: 0;font-size: 14px;">
                <table class="table table-hover table-bordered" style="border-collapse: collapse;margin: 0;padding: 0;width: 100%;">
                    <thead style="width: 100%;">
                        <tr style="width: 100%;">
                            <th scope="col" style="width: 10%;height: 30px;border: #dfdfdf solid 1px;">
                                <input id="all_select_checkbox" type="checkbox">
                            </th>
                            <th scope="col" style="width: 20%;height: 30px;border: #dfdfdf solid 1px;">序号</th>
                            <th scope="col" style="width: 35%;height: 30px;border: #dfdfdf solid 1px;">姓名</th>
                            <th scope="col" style="width: 35%;height: 30px;border: #dfdfdf solid 1px;">工号</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="t_table2"></tbody>
                </table>
                <div id="img-display1" style="width: 75%;text-align: center;">
                    <div style="margin-top: 10%;">
                        <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                        <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                    </div>
                </div>
            </div>

            <div style="height: 150px;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;">
                <div id="checked-label" style="margin-top: 1%;margin-left: 3%;width: 90%;font-size: 14px;">

                </div>
            </div>
            <hr>
            <div style="height: 70px;padding-right: 2%;font-size: 14px;">
                <button id="model-affirm" onclick="choose_people()" style="border-radius: 3px;height: 30px;float: right;margin-top: 15px;border: #1E90FF solid 1px;background: #1E90FF;color: white;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </div>

    <script>
        window.onload = function () {
            request_data();
        };

        function request_data() {       // type_s: 1、全部查询，2、查询我的申请，3、查询我的审批
            var present_id = window.location.href.split("id=")[1].replace("#", '');
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/announcements/notice_detail");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("id="+present_id);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate)
                        if(JsonDate["return_dic"]["type"] === 'pc'){
                            var decode = atob(JsonDate["return_dic"]["content"]);
                            var content = decodeURI(decode);
                        }
                        else {
                            var content = JsonDate["return_dic"]["content"]
                        }
                        document.getElementById("notice_title").innerText=JsonDate["return_dic"]["title"];
                        document.getElementById("company").innerText=JsonDate["return_dic"]["create_people_company"];
                        document.getElementById("create_people").innerText=JsonDate["return_dic"]["create_people"];
                        document.getElementById("creat_time").innerText=JsonDate["return_dic"]["creat_time"];
                        document.getElementById("content").innerHTML=content;
                        crtete_reception(JsonDate["notice_people_list"]);
                        if (JsonDate["return_dic"]["adjunct"]) {
                            var adjunct = JsonDate["return_dic"]["adjunct"];
                            var accessory = document.getElementById("accessory");
                            for (var i=0;i<adjunct.length;i++){
                                var div = document.createElement("div");var span_tag = document.createElement("span");var a_tag = document.createElement("a");
                                span_tag.innerHTML="附件"+String(i+1)+"：";a_tag.innerText = adjunct[i]["file_name"];div.style.color="black";a_tag.target='_blank';
                                if (adjunct[i].hasOwnProperty("pdf_path")){
                                    a_tag.href=adjunct[i]["pdf_path"];
                                }else {
                                    a_tag.href=adjunct[i]["file_path"];
                                }

                                div.appendChild(span_tag);div.appendChild(a_tag);accessory.appendChild(div);
                            }
                        }
                    }
                }
            };
        }

        function crtete_reception(json_data) {
            var Table = document.getElementById("Table");
            var Table2 = document.getElementById("Table2");
            var Table3 = document.getElementById("Table3");
            document.getElementById("auto_num").innerText=String(json_data.length) + " 人";
            var Have_to_see = [];
            var unread = [];
            for (var i=0;i<json_data.length;i++){
                var tr = document.createElement("tr");
                var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");
                td.innerHTML=json_data[i]["name"];td1.innerHTML=json_data[i]["state"];td2.innerHTML=json_data[i]["accepted_time"];
                if (!json_data[i]["signature_picture"]){
                    td3.innerHTML="";
                }else {
                    td3.innerHTML="<img style='width: 100px;height: 40px' src='"+json_data[i]["signature_picture"]+"'>";
                }
                tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);Table.appendChild(tr);
                if (json_data[i]["state"] === "未读") {
                    unread.push(json_data[i]);
                }else {
                    Have_to_see.push(json_data[i])
                }
            }
            document.getElementById("have_see").innerText=String(Have_to_see.length) + " 人";
            document.getElementById("unread_see").innerText=String(unread.length) + " 人";

            for (var j=0;j<Have_to_see.length;j++){
                var tr1 = document.createElement("tr");
                var td_1 = document.createElement("td");var td_2 = document.createElement("td");var td_3 = document.createElement("td");var td_4 = document.createElement("td");
                td_1.innerHTML=Have_to_see[j]["name"];td_2.innerHTML=Have_to_see[j]["state"];td_3.innerHTML=Have_to_see[j]["accepted_time"];
                if (!Have_to_see[j]["signature_picture"]){
                    td_4.innerHTML="";
                }else {
                    td_4.innerHTML="<img style='width: 100px;height: 40px' src='"+Have_to_see[j]["signature_picture"]+"'>";
                }
                tr1.appendChild(td_1);tr1.appendChild(td_2);tr1.appendChild(td_3);tr1.appendChild(td_4);Table2.appendChild(tr1);
            }

            for (var k=0;k<unread.length;k++){
                var tr2 = document.createElement("tr");
                var td__1 = document.createElement("td");var td__2 = document.createElement("td");var td__3 = document.createElement("td");var td__4 = document.createElement("td");
                td__1.innerHTML=unread[k]["name"];td__2.innerHTML=unread[k]["state"];td__3.innerHTML=unread[k]["accepted_time"];
                if (!unread[k]["signature_picture"]){
                    td__4.innerHTML="";
                }else {
                    td__4.innerHTML="<img style='width: 100px;height: 40px' src='"+unread[k]["signature_picture"]+"'>";
                }
                tr2.appendChild(td__1);tr2.appendChild(td__2);tr2.appendChild(td__3);tr2.appendChild(td__4);Table3.appendChild(tr2);
            }
        }

        function change_mind(ele_id) {
            if (ele_id === "notice_detail") {
                document.getElementById("notice_detail_tab").style.display = "inline-block";
                document.getElementById("reception_tab").style.display = "none";
                document.getElementById("notice_detail").className = "tab_top top_tag";
                document.getElementById("reception_detail").className = "tab_top";
            }else {
                document.getElementById("reception_tab").style.display = "inline-block";
                document.getElementById("notice_detail_tab").style.display = "none";
                document.getElementById("notice_detail").className = "tab_top";
                document.getElementById("reception_detail").className = "tab_top top_tag";
            }
        }

        function Change_tab(change_number) {
             if (change_number === 1){
                 document.getElementById("tab_1").className = "shadow_tab shadow_tab_1";
                 document.getElementById("tab_2").className = "shadow_tab_1";
                 document.getElementById("tab_3").className = "shadow_tab_1";
                 document.getElementById("tab_one").style.display = "inline-block";
                 document.getElementById("tab_two").style.display = "none";
                 document.getElementById("tab_three").style.display = "none";
             }else if (change_number === 2){
                 document.getElementById("tab_1").className = "shadow_tab_1";
                 document.getElementById("tab_2").className = "shadow_tab shadow_tab_1";
                 document.getElementById("tab_3").className = "shadow_tab_1";
                 document.getElementById("tab_two").style.display = "inline-block";
                 document.getElementById("tab_one").style.display = "none";
                 document.getElementById("tab_three").style.display = "none";
             }else {
                 document.getElementById("tab_1").className = "shadow_tab_1";
                 document.getElementById("tab_2").className = "shadow_tab_1";
                 document.getElementById("tab_3").className = "shadow_tab shadow_tab_1";
                 document.getElementById("tab_two").style.display = "none";
                 document.getElementById("tab_one").style.display = "none";
                 document.getElementById("tab_three").style.display = "inline-block";
             }
         }

        let title1 = document.querySelector("#title");
        let addForm1 = document.querySelector("#addForm1");
        title1.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm1.offsetLeft;
            let y = e.pageY - addForm1.offsetTop;


            document.addEventListener("mousemove", move);
            function move(e) {
                addForm1.style.left = e.pageX - x + 'px';
                addForm1.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function add_recipient(add_people) {
            var iss_id = window.location.href.split("id=")[1].replace("#", '');
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/back-management/AddRecipient", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("id=" + String(iss_id)+"&add_people="+String(add_people)+"&type=TZ");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 200) {
                            alert("添加成功！");
                            window.location.reload();
                        } else {
                            alert(JsonDate["message"]);
                        }
                    }
                }
            };
        }
    </script>
</body>
</html>